<template>
    <div v-loading="loading">
        <div @click="$router.go(-1)" style="display: flex;align-items: center;cursor: pointer;margin-bottom: 5px;">
            <i class="el-icon-arrow-left" style="font-size: 20px;color: #409eff;"></i>
            <div style="color: #409eff;">返回</div>
        </div>
        <div class="flexSB">
            <div>
                <video :src="videoUrl" class="videoBox" controls></video>
            </div>
            <div class="infoBox" style="padding: 0 30px;width: 100%;">
                <!-- <div style="font-weight: 600;font-size: 17px;margin-top: 20px;margin-bottom: 20px;text-align: center;">
                        视频详情
                </div>-->
                <el-card>
                    <el-descriptions :column="5" border class="margin-top" title="视频详情">
                        <el-descriptions-item>
                            <template slot="label">作者</template>
                            <UserInfo :user_id="videoInfo.author.id" :userInfos="videoInfo.author" v-if="videoInfo.author.id"></UserInfo>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">作品ID</template>
                            {{ videoInfo.creation_id }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">评论数</template>
                            {{ videoInfo.comment_count }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">观看数</template>
                            {{ videoInfo.viewed }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">作品名</template>
                            {{ videoInfo.creation_name }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">转发数量</template>
                            {{ videoInfo.forwards }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">打赏计数</template>
                            {{ videoInfo.tipping_count }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">推荐类型</template>
                            {{ videoInfo.recommend_type == 0 ? "普通" : videoInfo.recommend_type == 1 ? "今日推荐" : "精品推荐" }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">省份</template>
                            {{ videoInfo.province }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">城市</template>
                            {{ videoInfo.city }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">地区</template>
                            {{ videoInfo.area }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">用户置顶</template>
                            {{ videoInfo.user_top == 0 ? "否" : "是" }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">收费金额</template>
                            {{ videoInfo.fee }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">标签</template>
                            <el-tag :key="index" style="margin-right: 10px;" type="success" v-for="(item, index) in videoInfo.labels">
                                {{
                                item }}
                            </el-tag>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">分类</template>
                            <div v-if="videoInfo.categorys">
                                <el-tag :key="index" style="margin-right: 10px;" type="success" v-for="(item, index) in videoInfo.categorys">{{ item }}</el-tag>
                            </div>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">点赞数量</template>
                            {{ videoInfo.like_count }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">订单总价格</template>
                            {{ videoInfo.order_sum_price }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">用户IP</template>
                            {{ videoInfo.ip }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">是否青少年模式推荐内容</template>
                            {{ videoInfo.is_teenager == 0 ? "否" : "是" }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">用户详细地址</template>
                            {{ videoInfo.ip_address }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">用户设备型号</template>
                            {{ videoInfo.model }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">m3u8媒体地址</template>
                            {{ videoInfo.m3u8_media }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">终端地址</template>
                            {{ videoInfo.terminal }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">MAC地址</template>
                            {{ videoInfo.mac }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">添加时间</template>
                            {{ videoInfo.created_at }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">修改时间</template>
                            {{ videoInfo.updated_at }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">删除时间</template>
                            {{ videoInfo.deleted_at }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">操作</template>
                            <div style="display: flex;">
                                <div>
                                    <el-popconfirm @confirm="softDel(videoInfo.creation_id)" title="确定要删除这个数据吗？" v-if="!videoInfo.deleted_at">
                                        <el-button size="small" slot="reference" style="margin-left: 10px;margin-top: 10px;" type="danger">软删除</el-button>
                                    </el-popconfirm>

                                    <el-button @click="restore(videoInfo.creation_id)" size="small" style="margin-left: 10px;margin-top: 10px;" type="primary" v-else>恢复</el-button>
                                </div>

                                <div>
                                    <el-popconfirm @confirm="hardDel(videoInfo.creation_id)" title="删除之后将无法恢复，确定要删除这个数据吗？">
                                        <el-button size="small" slot="reference" style="margin-left: 10px;margin-top: 10px;" type="danger">硬删除</el-button>
                                    </el-popconfirm>
                                </div>
                            </div>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-card>

                <div style="margin-bottom: 20px;margin-top: 20px;" v-if="videoInfo.creation_id">
                    <comment :creation_id="videoInfo.creation_id"></comment>
                </div>
            </div>
        </div>
    </div>
</template>
      
<script>
import comment from '@/components/comment/index'
export default {
    components: {
        comment,
    },
    data() {
        return {
            visible: false,
            loading: false,
            videoUrl: '',
            datas: {},
            playShow: false,
            videoInfo: {},
        }
    },
    mounted() {
        //this.getworksList()
        if (this.$route.query.id) {
            console.log('this.$route.query.id', this.$route.query.id)
            this.getShortVideoDetails(this.$route.query.id)
        }
    },
    methods: {
        toArray(str) {
            const arr = []
            arr.push(str)
            return arr
        },

        softDel(id) {
            this.$request.del('/creation/delete_soft/' + id).then((res) => {
                this.$message.success('删除成功')
                this.getShortVideoDetails(this.$route.query.id)
            })
        },

        hardDel(id) {
            this.$request.del('/creation/delete_real/' + id).then((res) => {
                this.$message.success('删除成功')
                this.$router.push({ path: '/short-video-index' })
            })
        },
        restore(id) {
            this.$request.put('/creation/delete_soft_recover/' + id).then((res) => {
                this.$message.success('恢复成功')
                this.getShortVideoDetails(this.$route.query.id)
            })
        },

        playShowFun(item) {
            this.videoUrl = item.media_urls[0]
            this.videoInfo = item
            this.playShow = true
        },

        getShortVideoDetails(id) {
            let that = this
            this.$request.get('/creation/info/?creation_id=' + id).then((res) => {
                console.log('res', res)
                that.videoInfo = res
                that.videoUrl = res.media_urls[0]
            })
        },
    },
}
</script>

      
<style lang="scss"  scoped>
.videoBox {
    width: 800px;
    height: 850px;
    background-color: black;
}

.el-button--text {
    margin-right: 20px !important;
}

.el-popover {
    width: 250px;
}

.flexFS {
    display: flex;
}

.flexSB {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
</style>